<template>
	<view class="pie" :style="`--p:${ratio};--c:${color}`">
		<view class="pie_body"> {{ratio}}%</view>
	</view>

</template>

<script setup>
	defineProps({
		color: {
			type: String,
			default: "pink"
		},
		ratio: {
			type: Number,
			default: 100
		}
	})
</script>

<style lang="scss" scoped>
	@property --p {
		syntax: "<number>";
		inherits: true;
		initial-value: 1;
	}

	.pie {
		--p: 20;
		--b: 22px;
		--c: darkred;
		--w: 150px;

		width: var(--w);
		height: var(--w);
		aspect-ratio: 1;
		display: inline-grid;
		position: relative;

		
		&:before {
			content: "";
			position: absolute;
			border-radius: 50%;
			inset: 0;
			background: var(--c);
			opacity: 0.3; 
			-webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
			mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
		}


		&_body {
			width: var(--w);
			aspect-ratio: 1;
			position: relative;
			display: inline-grid;
			place-content: center;
			font-size: 25px;
			font-weight: bold;
			font-family: sans-serif;

			&:before,
			&:after {
				content: "";
				position: absolute;
				border-radius: 50%;
			}

			&:before {
				inset: 0;
				background:
					radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
					conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
				-webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
				mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
			}

			&:after {
				inset: calc(50% - var(--b)/2);
				background: var(--c);
				transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
			}

		}
	}


	.animate {
		animation: p 1s .5s both;
	}

	.no-round:before {
		background-size: 0 0, auto;
	}

	.no-round:after {
		content: none;
	}

	@keyframes p {
		from {
			--p: 0
		}
	}
</style>